<template>
	<NavBar :obj="{ title: title, color: '#000', backgroundColor: '#fff' }" />

	<view class="fill">
		<view class="item flex justify-between" v-for="(item, index) in list" :key="index">
			<view class="left flex flex-col justify-between flex-1">
				<view class="title line-2-clamp">{{ item.title }}</view>
				<view class="desc">
					{{ item.content }}
				</view>
				<view class="flex items-center">
					<view class="divs flex items-center">
						<up-icon name="clock" color="#999999" size="15"></up-icon>
						<text>{{ item.create_time }}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="show-load" v-if="showLoad" style="padding: 30upx">
			<up-loading-icon text="加载中" textSize="13"></up-loading-icon>
		</view>
		<up-empty v-if="!list.length && !showLoad" icon="/static/product/ic_zerodata@2x.png" iconSize="392rpx" marginTop="50%" text="暂无" />
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { port, goUrl, hint } from '../../service/port';
	import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';

	const list = ref([]);
	const page = ref(1);
	const cate = ref('');
	const title = ref('');

	const showLoad = ref(false);

	async function getNotifyRecord() {
		let res = await port('getNotifyRecord', { page: page.value, cate: cate.value });
		showLoad.value = false;
		if (res.data.length) {
			list.value = [...list.value, ...res.data];
			page.value++;
		}
	}

	onLoad((e) => {
		if (e.cate) {
			cate.value = e.cate;
		}
		if (e.title) {
			title.value = e.title;
		}
	});

	onShow(() => {
		page.value = 1;
		list.value.length = 0;
		showLoad.value = true;
		getNotifyRecord();

		// #ifdef MP-WEIXIN
		uni.setTabBarBadge({
			index: 3,
			text: info.value.notify_num
		});
		// #endif
	});

	onReachBottom(() => {
		getNotifyRecord();
	});
</script>

<style scoped lang="scss">
	:global(page) {
		background-color: #f4f5f8;
	}

	.fill {
		.item {
			background: #ffffff;
			border-radius: 18rpx;
			padding: 29rpx 25rpx;
			margin: 24rpx 30rpx;
			.left {
				margin-right: 27rpx;
				.title {
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
				}
				.desc {
					font-weight: 400;
					font-size: 26rpx;
					color: #444444;
					padding: 25rpx 0;
				}
				.divs {
					> text {
						font-weight: 400;
						font-size: 22rpx;
						color: #999999;
						margin-left: 5rpx;
					}

					&:first-child {
						margin-right: 36rpx;
					}
				}
			}
			.icon {
				width: 248rpx;
				height: 168rpx;
				border-radius: 18rpx;
			}
		}
	}
</style>
